<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>借书管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
	<!--搜索组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">书名</label>
							<div class="layui-input-inline">
								<input type="text" name="title" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">ISBN</label>
							<div class="layui-input-inline">
								<input type="text" name="isbn" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-inline">
								<input type="text" name="author" placeholder="" class="layui-input">
							</div>
						</div>
						
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">状态</label>
							<div class="layui-input-inline">
								<select  name="surplusnum" placeholder="" class="layui-input">
									<option value="-1">所有</option>
									<option value="1">有库存</option>
									<option value="0">已借完</option>

									</select>
							</div>
						</div>
			
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="book-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	<!--信息显示表格组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="book-table" lay-filter="book-table"></table>
			</div>
		</div>
	<!--批量借书组件-->
		<script type="text/html" id="book-toolbar">
		    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="batchBorrows"><i class="layui-icon layui-btn-radius"></i>批量借书</button>
		</script> 
<!--借书按钮组件-->
		<script type="text/html" id="book-bar">
			 <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="borrow"><i class="layui-icon layui-btn-radius"></i>借书</button>
		</script>
<!--时间格式化显示组件-->
		<script type="text/html" id="book-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','common'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
				let MODULE_PATH = "operate/";
				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: '书名',
							field: 'title',
                            align: 'center'
						},
						{
							title: 'ISBN',
							field: 'isbn',
                            align: 'center'
						},
						{
							title: '出版社',
							field: 'publish',
                            align: 'center'
						},
						{
							title: '类别',
							field: 'btype',
                            align: 'center'
						},
						{
							title: '作者',
							field: 'author',
                            align: 'center'
						},
						{
							title: '位置信息',
							field: 'bloc',
                            align: 'center'
						},
						{
							title: '总数量',
							field: 'totalnum',
                            align: 'center',
							sort: true
						},
						{
							title: '剩余数量',
							field: 'surplusnum',
                            align: 'center',
							sort: true
						},
						{
							title: '操作',
							toolbar: '#book-bar',
                            align: 'center'
						}
					]
				]

				table.render({
					elem: '#book-table',
					url: 'http://localhost:8080/books/select',
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#book-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(book-table)', function(obj) {
					if (obj.event === 'borrow') {
						if (obj.data.surplusnum>=0){
							window.borrow(obj);
						}else {
							layer.msg("图书库存不足",{icon:5,time:2000})
						}
					}
				});

				table.on('toolbar(book-table)', function(obj) {
						 if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchBorrows') {
						window.batchBorrows(obj);
					}
				});
				//条件查询
				form.on('submit(book-query)', function(data) {
					table.reload('book-table', {
						where: data.field,
						page: {curr:1}
					})
					return false;
				});

				window.borrow = function(obj) {
					layer.confirm('确定要借该书？', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load(2);
						$.post(
								"http://localhost:8080/borrows/addOne",
								{bid:obj.data.bid,uid:window.sessionStorage.getItem('uid')},
								function (msg){
									table.reload("book-table")
									layer.close(loading)
									layer.msg("借阅成功",{icon:6,time:2000})
								},
						)
						console.log(obj.data)
						return false;
					});
				}

				window.batchBorrows = function(obj) {
					let data = table.checkStatus(obj.config.id).data;
					if (data === "") {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					let bids ="";
					for (let i = 0;i<data.length;i++){
						bids+=data[i].bid+","
					}
					bids = bids.substr(0,bids.length-1);
					layer.confirm('确定要借这些书', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load(2);
						$.post(
								"http://localhost:8080/borrows/batchAdd",
								{bids:bids,uid:1},
								function (msg){
									table.reload("book-table")
									layer.close(loading)
									layer.msg("借阅成功",{icon:6,time:2000})
								}
						)
						return false;
					});
				}

				window.refresh = function(param) {
					table.reload('book-table');
				}
			})
		</script>
	</body>
</html>
